<template>
  <div class="history-container">

    <div class="hot-box">
      <div class="title">热门搜索</div>
      <span v-for="(hot,index) in hotSearchKey"
        :key="index"
        @click="getSearchList(hot.first)">{{hot.first}}</span>
    </div>
    <!-- 历史记录 -->
    <van-cell title="搜索历史">
     <div v-if="isDeleteShow">
        <span @click="$emit('clear-histories')">全部删除</span>
        &nbsp;
      <span @click="isDeleteShow=false">完成</span>
     </div>
      <van-icon name="delete" v-else @click="isDeleteShow=true" />

    </van-cell>
    <van-cell v-for="(item,index) in searchHistories"
      :key="index"
      :title="item"
      @click="SearchItem(item,index)">
      <van-icon v-show="isDeleteShow" name="close" />
    </van-cell>
    <!-- /历史记录 -->
  </div>
</template>

<script>
import { hotSearch } from '@/api/search.js'
export default {
  props: {
    searchHistories: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      hotSearchKey: [], // 热搜关键词
      // 控制删除状态
      isDeleteShow: false
    }
  },
  created () {
    this.getSearchKey()
  },
  methods: {
    // 获取热搜关键词
    async getSearchKey () {
      const { data: res } = await hotSearch()
      console.log(res)
      this.hotSearchKey = res.result.hots
    },
    // 点击直接到搜索结果
    getSearchList (val) {
      console.log(val)

      this.$emit('onchangeKey', val)
    },

    // 点击搜索历史记录的item项
    SearchItem (item, index) {
      if (this.isDeleteShow) {
        // 删除状态
        this.searchHistories.splice(index, 1)
      } else {
        // 非删除状态
        this.$emit('search', item)
      }
    }
  }
}
</script>

<style lang="less" scoped>

  .hot-box {
    padding: 10px;

    .title {
      font-size: 12px;
      line-height: 12px;
      color: #666;
    }

    span {
      display: inline-block;
      height: 32px;
      margin-right: 8px;

      margin-top: 8px;
      padding: 0 14px;
      font-size: 14px;
      line-height: 32px;
      color: #333;
      border: 1px solid rgb(228, 220, 220);
      border-radius: 32px;
    }
  }
</style>
